<template>
<div>
<div ref="echart" style="width:100%;height:470px;"></div>
</div>

  
</template>
<script>
import func from '@/assets/js/func.js'
export default {
  computed: {
    rdata () {
      if (!this.params.carDisplacementRank) return [];
      let arr = this.params.carDisplacementRank.map(item => { return { values: item.storageNum, name: item.carDisplacementRemark}}).sort(function (a, b) { return a.value - b.value})
      return arr
    }
  },
  watch: {
    'params.carDisplacementRank' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  methods: {
    init () {
      let _this = this
      let echart = this.$echarts.init(this.$refs["echart"]);
      echart.setOption({
        backgroundColor: 'rgba(19,22,41,0.6)',
        title: [
          {
            text: `销售出库车辆排量分析`,
            left: 20,
            top: 10,
            textStyle: {
              color: '#32FAF8',
              fontSize: 14,
              fontWeight: 'lighter'
            }
          }
        ],
        color: func.allColor(),
        series: [
          {
              name:'漏斗图',
              type:'funnel',
              x: '10%',
              y: 80,
              //x2: 80,
              y2: 60,
              width: '80%',
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort : 'descending', // 'ascending', 'descending'
              gap :0,
              
              data: [...this.rdata].reverse().map((item, index) => { item.value = (this.rdata.length - index) * (100 / this.rdata.length) ; return item}),
              roseType: true,
              label: {
                  normal: {
                      formatter: function (params) {
                        console.log(_this.rdata)
                        return _this.rdata[params.dataIndex].name + ' (' + _this.rdata[params.dataIndex].values + '辆)' ;
                      },
                      position: 'center'
                  }
              },
              itemStyle: {
                  normal: {
                      borderWidth: 0,
                      shadowBlur: 30,
                      shadowOffsetX: 0,
                      shadowOffsetY: 10,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
              
          }
        ]
      });
    }
  },
  props: [
    'params'
  ]
};
</script>
